<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="robots" content="index, follow"/>
    <title>{ms:global.name/}</title>
    <meta name="keywords" content="{ms:global.keyword/}">
    <meta name="description" content="{ms:global.descrip/}">
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="applicable-device" content="pc,mobile"/>
    <link href="/favicon.ico" rel="shortcut icon"/>
    <link href="/{ms:global.style/}css/style.css" rel="stylesheet"/>
    <link href="/{ms:global.style/}css/index.css" rel="stylesheet"/>
    <script src="/{ms:global.style/}js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/{ms:global.style/}js/jquery.superslide.2.1.1.js">//pc导航</script>
    <script type="text/javascript" src="/{ms:global.style/}js/jquery.bxslider.min.js">/*轮显*/</script>
    <script src="/{ms:global.style/}js/anim.js">//动画</script>
    <script src="/{ms:global.style/}js/owl.carousel.js"></script>
    <script type="text/javascript" src="/{ms:global.style/}js/basic.js"></script>
</head>
<body>
<#include "header.htm" />
<div style="color: white;width: 100%;height:450px;display: flex;flex-direction: column;background-image: linear-gradient(45deg, #4fa49a, #4361c2);">
    <div style="flex: 1"></div>
    <div style="display: flex;">
        <div style="flex: 1"></div>
        <img src="{@ms:file global.logo/}" style="width: 120px;height: 120px;" alt="Yicai Button Factory"/>
        <div style="flex: 1"></div>
    </div>
    <div style="display: flex;margin: 30px">
        <div style="flex: 1"></div>
        <span style="font-size: 32px;font-weight: bold">Yicai Button Factory</span>
        <div style="flex: 1"></div>
    </div>
    <div style="display: flex;">
        <div style="flex: 1"></div>
        <span style="font-size: 14px">Jiashan Shunchuang Clothing Accessories Co., Ltd</span>
        <div style="flex: 1"></div>
    </div>
    <div style="display: flex;margin-top: 30px;color: white">
        <div style="flex: 1"></div>
        <a style="color: goldenrod" href="/{ms:global.style/}picture/oeko-tex.pdf" class="button wide primary">OEKO-TEX</a>
        <div style="width: 20px"></div>
        <a style="color: goldenrod" href="/{ms:global.style/}picture/grs.pdf" class="button wide primary">GRS</a>
        <div style="flex: 1"></div>
    </div>
    <div style="flex: 1"></div>
</div>

<div style="width:100%;background: white;display: flex;color: #555">
    <div style="flex: 1;display: flex;flex-direction: column">
        <div style="flex: 1"></div>
        <h2 style="font-size: 32px;font-weight: bold;margin: 40px">ABOUT COMPANY</h2>
        <p style="margin-left: 40px;margin-bottom: 40px;margin-right: 40px;font-size: 14px;line-height: 18px">
        Jiashan Yicai Button Factory (Jiashan Shunchuang Clothing Accessories Co., Ltd) is located in Xitang town, Jiashan Count, Zhejiang Province. It is an Enterprise intergrating button research and development, production and marketing. We focus on high-end products and services to provide the fast, accurate and professional button technology and quality to many fashion brands in Europe.
        </p>
        <div style="flex: 1"></div>
    </div>
</div>
<!--轮显begin-->
<!--<div id="slider">-->
<!--    <ul class="bxslider">-->
<!--        {ms:arclist typeid="1666653706550321162"}-->
<!--        <li style="background-color:#1b1b1b;">-->
<!--            <div class="carousel-img">-->
<!--                <a href="<#if field.source!=''>${field.source}<#else>javascript:;</#if>" target="_blank">-->
<!--                    <img src="{@ms:file field.litpic/}" width="100%" alt="Yicai Button Factory" class="oimg"/>-->
<!--                </a>-->
<!--            </div>-->
<!--        </li>-->
<!--        {/ms:arclist}-->
<!--    </ul>-->
<!--</div>-->
<!--<script>-->
<!--    var slider = $('.bxslider').bxSlider({-->
<!--        mode: 'horizontal',/*fade,vertical*/-->
<!--        controls: true,-->
<!--        speed: 500,-->
<!--        hideControlOnEnd: false,-->
<!--        pager: true,-->
<!--        auto: true,-->
<!--    });-->
<!--    $(window).resize(function () {-->
<!--        slider.reloadSlider();-->
<!--    });-->
<!--</script>-->
<!--轮显end-->
<!--flash start-->
<!--<div class="flash_div">-->
<!--    <div id="owl-flash" class="owl-carousel">-->
<!--        {ms:arclist flag='f' size=5 typeid="1666653706550321162"}-->
<!--        <div class="item">-->
<!--            <dd>-->
<!--                <a href="javascript:;" title=""><img src="{@ms:file field.litpic/}"/></a>-->
<!--            </dd>-->
<!--        </div>-->
<!--        {/ms:arclist}-->
<!--    </div>-->
<!--</div>-->
<!--flash end-->
<div class="i_product_bg">
    <div class="wrap2">
        {ms:channel type='self' typeid="1666653706550321152"}
        <div class="i_title anim anim-1">
            <h2 class="f41">${field.typetitle}</h2>
            <p class="f24">${field.typeshorttitle}</p>
        </div>
        {/ms:channel}
        <div class="nproduct_list2">
            <ul>
                {ms:arclist typeid="1666653706550321152" size=6}
                <li class="anim anim-1">
                    <a href="{ms:global.html/}${field.link}" title="${field.title}">
                        <div class="imgs"><img src="{@ms:file field.litpic/}" alt="${field.title}">
                            <p>&nbsp;</p>
                        </div>
                        <h2 class="f24">${field.title}</h2>
                        <p>{@ms:len field.descrip 60 /}...</p>
                    </a>
                </li>
                {/ms:arclist}
            </ul>
        </div>
    </div>
</div>

<#include "footer.htm" />
<script language="javascript" src="/{ms:global.style/}js/foot.js"></script><!--尾部end-->
<script>
    $("#owl-flash").owlCarousel({/*手机轮显图*/
        items: 1,
        lazyLoad: true,
        autoPlay: true,
        itemsDesktop: [1199, 1],
        itemsDesktopSmall: [979, 1],
        itemsTablet: [768, 1],
        itemsTabletSmall: false,
        itemsMobile: [479, 1],
        //rewindNav:false,
        navigation: true
    });
    $("#owl-demo3").owlCarousel({/*行业案例*/
        items: 4,
        lazyLoad: true,
        autoPlay: true,
        itemsDesktop: [1199, 4],
        itemsDesktopSmall: [979, 3],
        itemsTablet: [768, 2],
        itemsTabletSmall: false,
        itemsMobile: [479, 2],
        navigation: true
    });

    window.onload = function () {/*轮显动画*/
        $('.bx-pager .bx-pager-item').click(function () {
            var linum = $(this).index();
            var CaseList = $(".bxslider li");

            $(this).find("a").click(function () {
                CaseList.removeClass("active");
                CaseList.eq(linum).addClass("active");

                $('.bx-pager .bx-pager-item').removeClass("active");
                $('.bx-pager .bx-pager-item').eq(linum).addClass("active");
                // $(this).addClass('csel').siblings().removeClass('csel');
                // CaseList.hide().eq(linum).show();
                //CaseList.find(".anim").removeClass("anim-show");
//			setTimeout(function(){
//				CaseList.eq(linum).find(".anim").addClass("anim-show");
//			},6)
            })
        })
    }
</script>
</body>
</html>
